<template>
    <van-nav-bar title="基本资料" left-text="" left-arrow @click-left="goBack" />
    <div class="user">
        <div class="user-image">
            <img :src="LoginUser.avatar_text" alt="">
        </div>
    </div>

    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field v-model="LoginUser.nickname" name="nickname" label="昵称" placeholder="请输入昵称"
                :rules="[{ required: true, message: '请填写昵称' }]" />
            <van-field v-model="LoginUser.mobile" name="mobile" label="手机号码" placeholder="请输入手机号码" />
            <van-field v-model="LoginUser.email" name="email" label="邮箱" placeholder="请输入邮箱" />
            <van-field v-model="LoginUser.password" type="password" name="password" label="密码" placeholder="请输入密码" />
            <van-field name="gender" label="性别">
                <template #input>
                    <van-radio-group v-model="LoginUser.gender" direction="horizontal">
                        <van-radio name="0">保密</van-radio>
                        <van-radio name="1">男</van-radio>
                        <van-radio name="2">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <!-- 地区 -->
            <van-field v-model="LoginUser.region_text" is-link readonly name="area" label="地区选择" placeholder="点击选择省市区"
                @click="showArea = true" />
            <van-popup v-model:show="showArea" destroy-on-close position="bottom">
                <van-area :area-list="areaList" :model-value="pickerValue" @confirm="onConfirm"
                    @cancel="showArea = false" />
            </van-popup>

            <!-- 头像 -->
            <van-field name="avatar" label="头像">
                <template #input>
                    <van-uploader v-model="avatar" :max-count="1" />
                </template>
            </van-field>

        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>

</template>
<script setup>
import { areaList } from '@vant/area-data';
const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ? proxy.$cookies.get('LoginUser') : {})
const showArea = ref(false)
let pickerValue = ref([`${LoginUser.province}`,`${LoginUser.city}`,`${LoginUser.district}`].join(','));
const avatar = ref([
    { url: LoginUser.avatar_text },
]);
const goBack = () =>{
    proxy.$router.push('/business/index')
}
const onConfirm = ({ selectedValues, selectedOptions }) => {
    pickerValue.value = `${selectedValues[0]}`
    showArea.value = false
    let regions = ''
    let [province, city, district] = selectedOptions //解析
    if(province)
    {
        regions = province.text + '-'
        LoginUser.province = province.value
    }
    if(city)
    {
        regions += city.text + '-'
        LoginUser.city = city.value
    }
    if(district)
    {
        regions += district.text
        LoginUser.district = district.value
    }
    LoginUser.region_text = regions
};
const onSubmit = async(values) => {
    let data = {
        id: LoginUser.id,
        nickname: values.nickname,
        mobile: values.mobile,
        email: values.email,
        gender: values.gender,
        province: LoginUser.province,
        city: LoginUser.city,
        district: LoginUser.district
    }

    // 判断是否修改密码
    if(values.password)
    {
        data.password = values.password
    }

    // 判断是否修改头像
    if(values.avatar.length > 0 &&  values.avatar[0].file)
    {
        data.avatar = values.avatar[0].file
        
    }
    let result = await Api.profile(data)
    if(result.code == 1)
    {
        success({
            message: result.msg,
            onClose: () => {
                goBack()
            }
        });

    } else{
        error({
            message: result.msg
        });
    }
};
</script>
<style>
@import url('/assets/css/profile.css');

.van-cell-group--inset {
    margin: 0;
}
</style>